<template>
  <div class="search">
    <!-- 导航栏区域 -->
    <van-nav-bar title="搜索中心" left-arrow @click-left="$router.back()" />
    <!-- 搜索框区域 -->
    <van-search
      v-model="key"
      show-action
      shape="round"
      placeholder="请输入搜索关键词"
      @input="getSuggest(key)"
    >
      <template #action>
        <div @click="onSearch(key)">搜索</div>
      </template>
    </van-search>

    <!-- 历史记录区域 -->
    <van-cell-group v-if="key.length == 0">
      <van-cell title="历史记录" />
      <van-cell v-for="(item, index) in historyList" @click="onSearch(item)" :key="index" :title="item">
        <template #right-icon v-if="!$store.state.token.token">
          <!-- 删除的那个图标 -->
          <van-icon @click.stop="delHistory(index)" style="color: #ddd" name="close" />
        </template>
      </van-cell>
    </van-cell-group>

    <!-- 联想区域 -->
    <van-cell-group v-else>
      <van-cell
        v-for="(item, index) in colorSuggests"
        @click="onSearch( suggestList[index] )"
        :key="index"
        icon="search"
      >
        <div v-html="item"></div>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { suggest } from "@/api/article";
import { getUserHistory } from "@/api/user";
import { getHistory, saveHistory } from "@/utils/storage";

export default {
  name: "search",

  async created() {
    // 页面一打开就需要有搜索历史
    // 但是要登录了才去发请求
    if (this.$store.state.token.token) {
      let res = await getUserHistory();
      this.historyList = res.data.data.keywords;
    } else {
      // 没登录就从本地存储取
      // 如果本地存储有，就用本地存储，本地存储没有就得到一个空数组
      this.historyList = getHistory() || [];
    }
  },
  data() {
    return {
      // 搜索框双向绑定的属性
      // 可以用来获取搜索框里的内容
      key: "",
      // 保存联想词汇的数组
      suggestList: [],
      timerId: null,
      // 准备一个保存搜索历史的数组
      historyList: [],
    };
  },

  methods: {
    // 搜索框内容改变触发的事件
    getSuggest(key) {
      // 清除上一次定时器
      clearTimeout(this.timerId);
      this.timerId = setTimeout(async () => {
        // 如果搜索框内容为空就不要发请求了
        if (key) {
          // 发请求获得联想的词汇
          let res = await suggest(key);
          this.suggestList = res.data.data.options;
        }
      }, 500);
    },

    // 2. 保存搜索历史
    onSearch(key) {
      if (key == '') return 
      
      // 因为登录了的历史记录是服务器自动保存的，所以不用触发这个函数
      if (!this.$store.state.token.token) {
        // key就是我们输入的搜索词汇，应该成为一条历史记录
        // 搜索词汇存到本地存储
        // 因为后面搜索的要在最前面，所以换句话说每次添加都要添加到数组的最前面
        // 如果是已经在数组的，就要删除，再添加
        // 如果没在数组就直接添加
        // 获取我搜索的关键字在数组中的下标
        let idx = this.historyList.indexOf(key);
        if (idx == -1) {
          this.historyList.unshift(key);
        } else {
          // 已经在数组了，就先删除，再添加
          // 返回值就是被删除的元素（是一个数组）
          let delItem = this.historyList.splice(idx, 1);
          // 虽然是一个数组，但是我们只删一个，所以下标0必然是我们被删除的那个元素
          // 再把它添加一次即可
          this.historyList.unshift(delItem[0]);
        }
        // 保存到本地存储
        saveHistory(this.historyList);
      }

      // 不管登没登录，它都要跳转到搜索结果页面
      this.$router.push({
        path: '/search/result',
        query: {
          keywords: key
        }
      })
    },

    // 3. 删除历史记录
    delHistory (index) {
      // 点谁就删谁
      this.historyList.splice(index, 1)
      saveHistory(this.historyList)
    }
  },

  computed: {
    colorSuggests() {
      // 准备一个正则，查找关键字，并且忽略大小写并且全局查找
      let regExp = new RegExp(this.key, "ig");
      let list = this.suggestList.map((item) => {
        return item.replace(
          regExp,
          `<span style="color:red">${this.key}</span>`
        );
      });

      return list;
    },
  },
};
</script>

<style lang="less">
.search {

  .van-icon-close {
    color: gray;
  }
}
</style>